import React, { useState, useEffect } from 'react';
import { Card } from 'react-vant';
import { CallrecordQuery } from '../sevice/PhoneServe';
import { useNavigate } from 'react-router-dom'

export default () => {

    const navigate = useNavigate();

    let [takelist, settakelist] = useState([])

    useEffect(() => {
        (async () => {
            let { data } = await CallrecordQuery()
            if (data.code == 200) {
                settakelist(data.rows)
            }
        })()
    }, [])
    // console.log(takelist);

    return (
        <>

            {takelist.map(item => {

                return <div style={{ margin: '15px 10px 10px 10px'  }} key={item.id}  onClick={()=>{
                      navigate(`/Lifepay/take/${item.id}`)
                }}>
                    <div>{item.rechargeTime}</div>
                    <Card style={{ border: '1px solid grey', marginTop: 10, }}>
                        <Card.Header>{item.title}</Card.Header>
                        <Card.Body>
                            <span style={{ color: 'green', paddingLeft: 220 }}>充值成功</span>&nbsp;&nbsp;&nbsp;
                            <span style={{ fontSize: 20 }} >{item.rechargeAmount}</span>
                        </Card.Body>

                    </Card>
                </div>

            })}

        </>
    );
};